<!--
 * @Author: Aaron
 * @Date: 2022-01-24 17:12:09
 * @LastEditors: Aaron
 * @LastEditTime: 2022-04-15 12:35:00
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\spuManagement\components\channelAttr.vue
 * @Company: 沃尔玛
-->
<template>
  <div class="storeInfo">
    <el-form ref="ruleForm" class="dataForm" :model="commodityAttribute" label-width="150px" size="mini" label-position="left">
      <channelAttribute :commodity-attribute="commodityAttribute" key-name="spuChannelBaseAttr" :span="span" :gutter="gutter" :is-disabled="isDisabled" />
      <category-attributes
        key-name="spuChannelCategoryAttrList"
        :commodity-attribute="commodityAttribute"
        :category-attributes="variable.keyAttributes"
        :span="span"
        :gutter="gutter"
        :is-disabled="isDisabled"
        att-name="关键属性"
      />
      <category-attributes
        key-name="spuChannelCategoryAttrList"
        :commodity-attribute="commodityAttribute"
        :category-attributes="variable.variableAttribute"
        :span="span"
        :gutter="gutter"
        :is-disabled="isDisabled"
        att-name="类目属性"
      />
      <category-attributes
        key-name="spuChannelCategoryAttrList"
        :commodity-attribute="commodityAttribute"
        :category-attributes="variable.salesAttribute"
        :span="span"
        :gutter="gutter"
        :is-disabled="isDisabled"
        att-name="销售属性"
      />
    </el-form>
  </div>
</template>

<script>
import categoryAttributes from '@/views/coi/components/categoryAttributes'
import channelAttribute from '@/views/coi/components/channelAttribute'

export default {
  name: 'StoreInfo',
  components: { categoryAttributes, channelAttribute },
  props: {
    commodityAttribute: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    span: {
      type: Number,
      default: 12
    },
    gutter: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // template结构
    variable() {
      const keyAttributes = Array.isArray(this.commodityAttribute.spuChannelCategoryAttrList)
        ? this.commodityAttribute.spuChannelCategoryAttrList.filter((item) => item.attributeType === 1)
        : [] // 关键属性
      const variableAttribute = Array.isArray(this.commodityAttribute.spuChannelCategoryAttrList)
        ? this.commodityAttribute.spuChannelCategoryAttrList.filter((item) => item.attributeType === 3)
        : [] // 类目属性
      const salesAttribute = Array.isArray(this.commodityAttribute.spuChannelCategoryAttrList)
        ? this.commodityAttribute.spuChannelCategoryAttrList.filter((item) => item.attributeType === 4)
        : [] // 销售属性
      return { keyAttributes, variableAttribute, salesAttribute }
    }
  },
  methods: {
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../css/formcss';
.el-row {
  margin-left: -10px !important;
}
/deep/ .head {
  font-weight: 700;
  margin-bottom: 20px;
}
</style>
